<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>
	</title>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}

		.list {
			width: 150px;
			margin: 0 auto;
			height: 500px;
		}

		a {
			border-radius: 5px;
			text-decoration: none;
			display: block;
			height: 30px;
			width: 100%;
			position: relative;
			color: #fff;
			font-size: 13px;
			background:#DADADA;
			line-height: 30px;
			border-bottom: 1px solid #dedede;
			/* text-align: center; */
			padding-left: 50px;
			box-sizing: border-box;

		}

		li {
			list-style: none;
		}

		.t2,
		.t3,
		.t4 {
			display: none;
		}

		i {
			width: 16px;
			height: 16px;
			position: absolute;
			top: 8px;
			left: 15px;
			/* padding:7px 0px; */
			display: inline-block;
			background: url(img/leftJia.png) no-repeat;
		}

		.current {
			background: #8A0706;
			font-size: 16px;
		}
	</style>
</head>

<body>

	<div class="list">
		<ul class='t1'>
			<li>
				<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
				<ul class='t2'>
					<li><a href="javascript:;">二级菜单</a></li>

					<li>
						<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
						<ul class='t3'>
							<li><a href="javascript:;">三级菜单</a></li>

							<li>
								<a href="javascript:;" title="1"
									onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
								<ul class='t4'>
									<li><a href="javascript:;">四级菜单</a> </li>
									<li><a href="javascript:;">四级菜单</a> </li>
								</ul>
							</li>
							<li><a href="javascript:;">二级菜单</a></li>

						</ul>
					</li>
					<li><a href="javascript:;">二级菜单</a></li>

				</ul>
			</li>
			<li>
				<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
				<ul class='t2'>
					<li><a href="javascript:;">二级菜单</a></li>
					<li><a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
						<ul class='t3'>
							<li><a href="javascript:;" title="1"
									onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
								<ul class='t4'>
									<li><a href="javascript:;">四级菜单</a> </li>
									<li><a href="javascript:;">四级菜单</a> </li>
								</ul>
							</li>

						</ul>
					</li>
				</ul>
			</li>
			<li><a href="javascript:;">一级菜单</a></li>
			<li>
				<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
				<ul class='t2'>
					<li><a href="javascript:;">二级菜单</a></li>

					<li>
						<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
						<ul class='t3'>
							<li><a href="javascript:;">三级菜单</a></li>

							<li>
								<a href="javascript:;" title="1"
									onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
								<ul class='t4'>
									<li><a href="javascript:;">四级菜单</a> </li>
									<li><a href="javascript:;">四级菜单</a> </li>
								</ul>
							</li>
							<li><a href="javascript:;">三级菜单</a></li>

						</ul>
					</li>
					<li><a href="javascript:;">二级菜单</a></li>

				</ul>
			</li>
		</ul>
	</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
	function sum1(e, h) {
		e.attr("title", parseInt(e.attr('title')) + 1);
		// console.log(h);
	//	e.parent().siblings().children('a').removeClass("current");
			e.parent().children("ul").toggle(500);
		if (h % 2 == 1) {
			e.children('i').css({ 'background-image': "url(img/leftJian.png)" });
			e.addClass("current");
			e.parent().siblings().children("ul").hide(500);
			e.parent().siblings().children('a').children("i").css({ 'background-image': "url(img/leftJia.png)" });
			//console.log(p);
			e.parent().siblings().children('a').removeClass("current");
			//var p=parseInt(e.parent().siblings().children('a').attr("title"))+1;
			var p=parseInt(e.parent().siblings().children('a').attr("title"));
			if(p%2==0){
				p++;
			}else if(p%2==1){
				p=p;
			}
			e.parent().siblings().children('a').attr('title',p);
			//console.log(e.parent().children("li").children("ul"));
		} else if (h % 2 == 0) {
			e.children('i').css({ 'background-image': "url(img/leftJia.png)" });
			e.removeClass("current");
			
		}
	}
	function sum2(e, s) {
		e.attr("title", parseInt(e.attr('title')) + 1);
		e.parent().siblings().children('a').removeClass("current");
		e.addClass("current");
		e.parent().children("ul").toggle(500);
		if (s % 2 == 1) {
			e.children('i').css({ 'background-image': "url(img/leftJian.png)" });
			e.addClass("current");
		} else if (s % 2 == 0) {
			e.children('i').css({ 'background-image': "url(img/leftJia.png)" });
			e.removeClass("current");
		}
		//e.parent().children().children("ul").hide();
	}
</script>

</html>